<template>
  <div class="realizeBox">
    <div class="billH flex f-s f18 c2a">我的账单</div>
    <div class="billCBox">
      <div class="billCListBox">
        <div class="billCListThTr flex f-s">
          <div class="billCListTh billCListTh1 flex f16 c3">操作</div>
          <div class="billCListTh billCListTh2 flex f16 c3">充值金额</div>
          <div class="billCListTh billCListTh3 flex f16 c3">账户余额</div>
          <div class="billCListTh billCListTh4 flex f16 c3">时间</div>
        </div>
        <div class="billCListTr flex f-s" v-for="(v, k) in listArr" :key="k + 'listArr'">
          <div class="billCListTd billCListTd1 flex f14 c6">{{ v.cz }}</div>
          <div class="billCListTd billCListTd2 flex f14 c6">{{ v.je }}</div>
          <div class="billCListTd billCListTd3 flex f14 c6">{{ v.ye }}</div>
          <div class="billCListTd billCListTd4 flex f14 c6">{{ v.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bill",
  data() {
    return {
      listArr: [
        {
          cz: "充值",
          je: "+￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "消费",
          je: "-￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "退款",
          je: "+￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "消费",
          je: "-￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "充值",
          je: "+￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "消费",
          je: "+￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
        {
          cz: "退款",
          je: "+￥1000.00元",
          ye: "￥3443.03元",
          time: "2015-04-15 17:21:21",
        },
      ],
    };
  },
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.c2a {
  color: #2a2a2a;
}
</style>

<style scoped>
.realizeBox {
  width: 100%;
}
.billH {
  width: calc(100% - 2px);
  height: 56px;
  border: 1px solid #e9e9e9;
  text-indent: 20px;
}
.billCBox {
  width: calc(100% - 2px);
  min-height: 566px;
  border: 1px solid #e9e9e9;
  border-top: none;
  overflow: hidden;
}
.billCListBox {
  width: 1043px;
  height: 414px;
  margin: 20px 20px;
}
.billCListThTr {
  background-color: #f2f2f2;
  border: 1px solid #e9e9e9;
  border-bottom: none;
}
.billCListTr {
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  border-top: none;
}

.billCListTh {
  height: 46px;
}
.billCListTd {
  height: 53px;
}
.billCListTh1,
.billCListTd1 {
  width: 226px;
  margin-right: 12px;
}
.billCListTh2,
.billCListTd2 {
  width: 283px;
}
.billCListTh3,
.billCListTd3 {
  width: 282px;
  margin-right: 13px;
}
.billCListTh4,
.billCListTd4 {
  width: 225px;
}
</style>
